<template>
    <div class="box">
        <ul>
            <li class="left">
                <van-image 
                    class="left-img" 
                    fit="cover" 
                    width="3.75rem" 
                    height="3.75rem" 
                    radius=".625rem" 
                    :src="userInfo.headImgUrl" 
                />
            </li>
            <li class="right">
                <p class="name">{{ userInfo.nickname }}</p>
                <p class="text">{{ dynamic.text }}</p>
                <div class="image-container">
                    <van-image 
                        fit="cover"
                        v-for="(image, index) in dynamic.imageUrls" 
                        :key="index"
                        :width="dynamic.imageUrls.length > 0 && dynamic.imageUrls.length < 2 ? 170 : 80" 
                        :height="dynamic.imageUrls.length > 0 && dynamic.imageUrls.length < 2 ? 200 : 80" 
                        :src="image" 
                        @click="clickImage(index)" 
                    />              
                </div>
                <!-- 评论与点赞按钮部分 -->
                <div class="comments-and-likes">
                    <span class="time">{{ formatDate(dynamic.time) }}</span>
                    <van-popover 
                        theme="dark" 
                        trigger="click" 
                        placement="left" 
                        v-model="showPopover"
                    >
                        <van-button 
                            icon="like-o" 
                            color="#404040" 
                            class="van-hairline--right"
                            @click="onClickLike"
                        >点赞</van-button> 
                        <van-button 
                            icon="comment-o" 
                            color="#404040" 
                            @click="onClickComment"
                        >评论</van-button>   
                        <template #reference>
                            <van-button size="small" icon="weapp-nav" />
                        </template>
                    </van-popover>
                </div>
                <!-- 点赞与评论列表 -->
                <template v-if="!is_dynamicDetail">
                    <span class="likes-list" v-if="dynamic.liked_users.length > 0">{{ likesListShow }}</span>
                    <template v-if="dynamic.comment.length > 0">
                        <div class="comment-list" v-for="(item, index) in dynamic.comment" :key="index">
                            <span v-html="setMessageHtml(item.user, item.content)" />
                        </div>
                    </template>
                </template>
            </li>
        </ul>
        <!-- 【在 DynamicDetailView界面】显示的点赞与评论列表 -->
        <template v-if="is_dynamicDetail">
            <span class="likes-list" v-if="dynamic.liked_users.length > 0">{{ likesListShow }}</span>
            <template v-if="dynamic.comment.length > 0">
                <div class="comment-list" v-for="(item, index) in dynamic.comment" :key="index">
                    <span v-html="setMessageHtml(item.user, item.content)" />
                </div>
            </template>
        </template>
        <!-- 评论输入框 -->
        <Input class="inputStyle" ref="Input" @sendContent="sendComment" v-show="showInput || is_dynamicDetail" />
    </div>
</template>

<script>
    import { ImagePreview } from 'vant';
    import { mapMutations, mapState, mapActions } from "vuex";
    import Input from "./input.vue";
    import { eventBus, eventTypes } from "@/utils/event-bus";
    export default {
        props: {
            userInfo: {
                type: Object,
                default: () => ({
                    headImgUrl: "",   
                    nickname: "",
                }),
                validator: (user) => {
                    return "headImgUrl" in user && "nickname" in user;
                },
            },
            dynamic: {
                type: Object,
                default: () => ({
                    _id: "",
                    text: "",
                    imageUrls: [],
                    comment: [],
                    liked_users: [],
                    time: "",
                }),
                validator: (dynamic) => {
                    return "_id" in dynamic && "text" in dynamic;
                },
            },
            is_dynamicDetail: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                showPopover: false,
                showInput: false,
                showPicker: false,
                index: -1,
            };
        },
        watch: {
            showInput(to, from) {       // 监听showInput如果要评论那么隐藏主页下面menu
                if (!to) {
                    eventBus.emit(eventTypes.HIDE_TABBAR);
                } else {
                    eventBus.emit(eventTypes.SHOW_TABBAR);
                }
            }
        },
        components: {
            Input,
        },
        computed: {
            ...mapState(['user']),
            ...mapState({
                dynamic_store: state => state.userInfo.dynamic,
                dynamic_store_G: state => state.userInfo.dynamic_G
            }),
            likesListShow() {
                let { liked_users } = this.dynamic;
                
                if (liked_users.length == 0) return '';

                let str = "❤ ";

                return liked_users.length > 1 ? 
                str += liked_users.join(", ") : 
                str += liked_users[0];
            },
        },
        methods: {
            ...mapMutations('userInfo', ['setDynamic_like', 'setDynamic_comment', 'setDynamic_G_like', 'setDynamic_G_comment']),
            ...mapActions('userInfo', ['handleLike_dynamic', 'handleSend_comment_dynamic']),
            clickImage(index) {
                ImagePreview({ images: this.dynamic.imageUrls, startPosition: index});
            },
            setMessageHtml(user, content) {
                let html = content.replace(
                    /\[(\d+\.gif)\]/g, 
                    '<img src="./gif/$1" width="25" height="25" style="vertical-align: middle;">'
                );

                return user + ": " + html;
            },
            async onClickLike() {
                this.showPopover = !this.showPopover;

                let value = { 
                    dynamic_id: this.dynamic._id,
                    liked_user_id: this.user._id,
                };

                let res_liked_dynamic = await this.handleLike_dynamic(value);
                console.log('点赞结果', res_liked_dynamic);

                let { status_code, info, data } = res_liked_dynamic;

                if (status_code != 200) {
                    console.log(info);
                    return;
                }
 
                if (this.is_dynamicDetail) {
                    (this.index != -1) && (this.setDynamic_like({ index: this.index, data: data.user_nickname }));
                } else {
                    (this.index != -1) && (this.setDynamic_G_like({ index: this.index, data: data.user_nickname }));
                }
            },
            onClickComment() {
                [this.showPopover, this.showInput] = [!this.showPopover, !this.showInput];

                if (this.is_dynamicDetail) {
                    this.$refs.Input.$refs.messageInput.focus();
                }
            },
            async sendComment(comment) {
                let value = {
                    dynamic_id: this.dynamic._id,
                    comment_user_id: this.user._id,
                    comment
                }

                let resulst = await this.handleSend_comment_dynamic(value);
                console.log('评论结果', resulst);  
                
                let { status_code, info, data } = resulst;

                if (status_code != 200) {
                    console.log(info);
                    return;
                }

                if (this.is_dynamicDetail) {
                    (this.index != -1) && (this.setDynamic_comment({ index: this.index, data }));
                } else {
                    (this.index != -1) && (this.setDynamic_G_comment({ index: this.index, data }));
                }
            },
            formatDate(str) {
                return str.slice(0, 16).replace('T', ' ');
            },
        },
        created() {
            if (this.is_dynamicDetail) {
                this.index = this.dynamic_store.findIndex(item => item._id == this.dynamic._id);
            } else {
                this.index = this.dynamic_store_G.findIndex(item => item._id == this.dynamic._id);
            }
        }
    };
</script>

<style lang="less" scoped>
    .box {
        width: 100%;
        box-sizing: border-box;
        position: relative;
        margin-top: 10px;
        padding: 0 10px;
        box-sizing: border-box;
        ul {
            width: 100%;
            display: flex;
            margin-bottom: .625rem;
            .left {
                margin-right: 20px;
            }
            .right {
                flex-grow: 1;
                .name {
                    font-size: 1.5625rem;
                    font-weight: 600;
                }
                .text {
                    margin: 0.3125rem 0 0.3125rem 0;
                    font-size: 1.25rem;
                }
                .image-container {
                    display: flex;
                    flex-wrap: wrap;
                    .van-image {
                        margin: 0.3125rem 0.3125rem 0 0;
                    }
                }
                .comments-and-likes {
                    display: flex;
                    height: 2rem;
                    justify-content: space-between;
                    align-content: center;
                    .time {
                        line-height: 2rem;
                    }
                }
            }
        }
    }
    .inputStyle {
        position: fixed;
        left: 0;
        bottom: 0px;
        z-index: 1000;
        width: 100%;
        .icon {
            width: 1.875rem;
            height: 1.875rem;
        }
    }
    .likes-list {
        display: block;
        width: 100%;
        flex-wrap: wrap;
        font-size: 1rem;
        color: #6a7692;
        background: #ebeced;
        margin-top: .625rem;
        padding: .3125rem;
        box-sizing: border-box;
        border-bottom: 0.5px solid #565d6e;
    }
    .comment-list {
        width: 100%;
        flex-wrap: wrap;
        font-size: 1rem;
        background: #ebeced;
        padding: .3125rem;
        box-sizing: border-box;
        span {
            color: #6a7692;
        }
    }
</style>